require(['config'],()=>{
    require([],()=>{
        class Index{
            constructor(){
                this.tbody = document.querySelector('tbody')
                this.cartTable = document.querySelector('.cartTable')
                this.selectAll = document.querySelector('.selectAll')
                this.totalNum = document.querySelector('.totalNum')
                this.money = document.querySelector('.money')
                this.list = JSON.parse(localStorage.getItem('cart')) || []
                this.init()
            }
            init(){
                this.render()
                //不穿数据一开始调用
                this.bindTtml()
                this.total()
            } 
            //渲染界面
    render(){
        if(!this.list.length){
            this.tbody.innerHTML = `
            <tr height="100">
                 <td colspan="6">
                    <h1>你的购物车为空 <a href="/index.html">添加商品</a></h1>
                 </td>
            </tr>    
            `
        }else{
            this.tbody.innerHTML = ''
            this.list.forEach(item => {
                this.tbody.innerHTML +=`
            <tr class="shangpinxx">
                <td><input type="checkbox" value="" class="select" data-id="${item.goods_id}"${item.is_select && "checked"}/></td>
                <td>
                    <img src="${item.img_small_logo}" >
                    <span class="hide">${item.title}</span>
                </td>
                <td><span>${item.price}</span></td>
                <td>
                    <span class="sub" data-id="${item.goods_id}">-</span>
                    <input type="text" value="${item.cart_number}" class="txt" data-id="${item.goods_id}"/>
                    <span class="add" data-id="${item.goods_id}">+</span>
                </td>
                <td><span class="price">${Math.round((item.cart_number * item.price) * 100) / 100}元</span></td>
                <td><span class="del" data-id="${item.goods_id}">删除</span></td>
            </tr>
            `
            })
        }
        localStorage.setItem('cart',JSON.stringify(this.list))
    }
    
    bindTtml(){
        this.cartTable.onclick = (e)=>{
            let target = e.target || e.srcElement
            //全选
            if(target.className == 'selectAll'){
                let type = target.checked
                this.list.forEach(item=>{
                    item.is_select = type
                })
                this.render()
                this.total()
            }         
            //单选功能
            if(target.className == 'select'){
                let id = target.dataset.id - 0
                //拿到对应的数据
                let goods = this.list.find(item=>{
                    return item.goods_id == id
                })
                //如果is_select的状态是fales,取反变成ture，反之亦然
                goods.is_select = !goods.is_select         
                //当所有选单选是选中的状态，让全选选中
                let res = this.list.every(item=>{return item.is_select == true})
                if(res){
                    this.selectAll.checked = true
                }else{
                    this.selectAll.checked = false
                }
                this.render()
                this.total()
            }
            //增加商品功能
            if(target.className =='add'){
                let id = target.dataset.id - 0
                //拿到对应的数据
                let goods = this.list.find(item=>{return item.goods_id == id})               
                if(goods.cart_number ==10){
                    alert('亲，只能购买10件哦！')
                    return false
                }
                goods.cart_number++
                this.render()
                this.total()
            }
            //减少商品
            if(target.className =='sub'){
                let id = target.dataset.id - 0
                //拿到对应的数据
                let goods = this.list.find(item=>{return item.goods_id == id}) 
                if(goods.cart_number ==1){
                    return false
                }
                goods.cart_number--
                this.render()
                this.total()
            }
            //删除商品
            if(target.className =='del'){
                let id = target.dataset.id - 0
                //拿到对应的数据
                let index = this.list.findIndex(item=>{return item.goods_id == id})
                this.list.splice(index,1)
                
                if(!this.list.length){
                    this.selectAll.checked = false
                }
                this.render()
                this.total()

            }
            //删除选中商品
            if(target.className =='dlAll'){
                let data = this.list.filter(item=>{return item.is_select ==false})
                this.list = data              
                if(!this.list.length){
                    this.selectAll.checked = false
                }
                this.render()
                this.total()
            }
            // if(target.className =='calc'){
            //     location.href = `settlement.html?price=`+this.money.innerHTML
                
            // }

        }
    }
    total(){
        let num = 0
        let price = 0
        this.list.forEach(item=>{
            if(item.is_select ==true){
                num+=item.cart_number  
                price += item.cart_number * item.price
            }
        })
        this.totalNum.innerHTML = num
        this.money.innerHTML = price.toFixed(2)
    } 
            
        }
        new Index()
    })
})